<template>
    <div>
        <div class="i-layout-page-header">
            <PageHeader hidden-breadcrumb>
                <div slot="title">
                    <div style="display:inline-block;font-size: 14px;font-weight: bold">{{ patientInfo.name }}
                        {{ patientInfo.mobile }} <Icon v-if="patientInfo.is_follow === 1" type="ios-heart"></Icon>
                        <Icon v-if="patientInfo.is_anti_relapse === 1" type="md-git-branch" />
                    </div>
                    <span style="margin-left: 12px;">
                        <Poptip placement="bottom" trigger="hover">
                            <span>
                                <Icon type="ios-albums-outline" /></span>
                            <div slot="content" class="historyPhone">
                                <div class="phoneBox">
                                    <div class="hisToryText">历史号码</div>
                                    <div v-if="!mobile_history.length" class="noHistory">暂无历史记录</div>
                                    <template v-else>
                                        <div v-for="(item,index) in mobile_history" :key="index" class="hahahhahaha">
                                            {{item}}</div>
                                    </template>
                                </div>
                            </div>
                        </Poptip>
                    </span>
                    <span class="sky-s1"> {{ patientInfo.gender_str }} {{ patientInfo.age }} </span>
                    <tag>诊疗号:{{ patientInfo.patient_card_id }}</tag>
                    <span class="sky-s2">创建时间:{{ patientInfo.reg_time_str }}</span>
                    <Tag color="volcano" v-if="patientInfo.outpatient_name">{{ patientInfo.outpatient_name }}</Tag>
                </div>
                <div slot="action">
                    <!-- <ButtonGroup>
                        <Button
                            @click="focusOn(patientInfo.id,patientInfo.is_follow)">{{patientInfo.is_follow|handleAntis }}</Button>
                    </ButtonGroup> -->
                    <!-- <ButtonGroup v-if="diagnosisStatus === 1">
                        <Icon @click="changeAnti(patientInfo.id,patientInfo.is_anti_relapse)" type="md-git-compare" />
                        <Button
                            @click="changeAnti(patientInfo.id,patientInfo.is_anti_relapse)">{{patientInfo.is_anti_relapse|handleAnti}}</Button>
                    </ButtonGroup> -->
                    <ButtonGroup v-if="diagnosisStatus === 1">
                        <Tooltip :content="patientInfo.is_anti_relapse|handleAnti" placement="bottom">
                            <Icon v-if="patientInfo.is_anti_relapse" size="24" @click="changeAnti(patientInfo.id,patientInfo.is_anti_relapse)" type="md-git-compare" />
                            <Icon v-else size="24" @click="changeAnti(patientInfo.id,patientInfo.is_anti_relapse)" type="ios-git-compare" />
                        </Tooltip>
                    </ButtonGroup>
                    <ButtonGroup>
                        <Tooltip :content="patientInfo.is_follow|handleAntis" placement="bottom">
                            <Icon v-if="patientInfo.is_follow" size="24" @click="focusOn(patientInfo.id,patientInfo.is_follow)" type="md-heart" />
                            <Icon v-else size="24" @click="focusOn(patientInfo.id,patientInfo.is_follow)" type="md-heart-outline" />
                        </Tooltip>
                    </ButtonGroup>
                    <Button @click="handleOpenRemark" type="primary">备注</Button>
                    <Button @click="handleOpenDrawer" type="primary">编辑</Button>
                </div>
                <div slot="content">
                    <DescriptionList :col="2">
                        <Description term="标签：">
                            <tag class="tag" v-for="(item, inum) in patientInfo.tags_name_arr" :key="inum">
                                <span v-if="item.length < 12">
                                    {{item}}
                                </span>
                                <Poptip v-else word-wrap transfer trigger="hover" placement="right-start" width="200"
                                    :content="item">
                                    {{item.substring(0, 11)}}...
                                </Poptip>
                            </tag>
                            <Button class="tag" size="small" @click="open">+ 添加标签</Button>
                        </Description>
                    </DescriptionList>
                    <DescriptionList :col="4">
                        <Description term="所属医助：">{{patientInfo.belong_assistant_name}}</Description>
                        <Description term="所属客服：">{{patientInfo.belong_member_name}}</Description>
                        <Description term="上次来院时间：">{{ patientInfo.created_at_str }}</Description>
                        <Description term="诊室：">{{ patientInfo.clinic_name }}</Description>
                        <Description term="下次复诊日期：">{{ patientInfo.next_revisiting_time_str }}</Description>
                        <Description term="回访次数：">{{ patientInfo.callback_count }}</Description>
                        <Description term="下次回访时间：">
                            {{ patientInfo.is_show_customer === 1 ? patientInfo.kf_next_callback_time_str : patientInfo.yz_next_callback_time_str }}
                        </Description>
                        <Description term="居住城市：">{{ patientInfo.city_name }}</Description>
                    </DescriptionList>
                    <DescriptionList :col="4" v-show="isHidden">
                        <Description term="来院次数：">{{ patientInfo.revisiting_count }}</Description>
                        <Description term="消费金额：">
                            <span
                                :class="{'moenyContent': (!moneyStatus && String(this.patientInfo.is_show_reality_moeny) !== '0')}"
                                @click="onMoney">{{ moneyStatus ? patientInfo.reality_money : '****'}}</span>
                        </Description>
                        <Description term="病种：">{{ patientInfo.diseases_name }}</Description>
                        <!-- <Description term="诊疗评估：">{{ patientInfo.clinic_assess_str }}</Description> -->
                        <Description term="风控类型：">{{ patientInfo.risk_type_str }}</Description>
                        <Description term="效果类型：">{{ patientInfo.effect_type_str }}</Description>
                        <Description term="数据来源：">{{ patientInfo.source_name_str}}</Description>
                        <Description term="住院次数：">{{ patientInfo.in_hospital_num}}</Description>

                    </DescriptionList>
                    <DescriptionList :col="2" v-show="isHidden">
                        <Description term="部位：">
                            <tag style="margin-top: -3px" v-for="(item, index) in patientInfo.body_parts_name_arr"
                                :key="index">{{ item }}</tag>
                        </Description>
                        <Description term="备注：">
                            <span v-if="patientInfo.remark">
                                <span v-if="patientInfo.remark.length < 50">
                                    {{patientInfo.remark}}
                                </span>
                                <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="500"
                                    :content="patientInfo.remark">
                                    {{patientInfo.remark.substring(0,50)}}…
                                </Poptip>
                            </span>
                            <span v-else>无</span>
                        </Description>
                    </DescriptionList>
                    <DescriptionList :col="2" v-show="isHidden">
                        <Description term="详细地址：">
                            <span v-if="patientInfo.address">
                                <span v-if="patientInfo.address.length < 53">
                                    {{patientInfo.address}}
                                </span>
                                <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="500"
                                    :content="patientInfo.address">
                                    {{patientInfo.address.substring(0,53)}}…
                                </Poptip>
                            </span>
                        </Description>
                    </DescriptionList>
                    <a class="hidden" @click="hidden">{{value}}
                        <Icon v-show="isIcon" type="ios-arrow-up" />
                        <Icon v-show="!isIcon" type="ios-arrow-down" /> </a>
                </div>
            </PageHeader>
        </div>
        <Card :bordered="false" dis-hover class="ivu-mt i-table-no-border">
            <Tabs :value="activeTab" :animated="false" @on-click="handleChangeTab">
                <TabPane label="用户足迹" name="1">
                    <Foot ref="userFoot" />
                </TabPane>
                <TabPane label="回访信息" name="2">
                    <returnVisit :status="status" :patientInfo="patientInfo" ref="returnVisitInfo"
                        @closeUpdate="updateShow" />
                </TabPane>
                <TabPane label="病历信息" name="3">
                    <Case ref="medicalRecord" />
                </TabPane>
                <TabPane label="治疗信息" name="4">
                    <Treatment ref="treat" />
                </TabPane>
                <TabPane label="消费信息" name="5">
                    <consume ref="consume" />
                </TabPane>
                <TabPane label="治疗图片" name="6">
                    <Images bordered ref="treatImg" />
                </TabPane>
                <TabPane label="操作日志" name="7">
                    <Journal ref="actionLog" />
                </TabPane>
            </Tabs>
        </Card>
        <Modal v-model="modal12" draggable scrollable title="添加标签" @on-ok="putTag">
            <div v-for="(item, indexs) in tags_list" :key="indexs">
                <span>{{item.group_name}}：</span>
                <Tag v-for="(label, index ) in item.tags_list" @on-change="handleClose(indexs, index)" checkable
                    :key='"i" + index' :checked="label.checked === 1" color="primary">{{label.tags_name}}</Tag>
            </div>
        </Modal>
        <edit-patient ref="detailEdit" @ok="updateShow" />
        <Modal v-model="showCreate" :mask-closable="false" :title="title" :loading="creating" @on-ok="handleCreate"
            @on-cancel="handleCancel">
            <Form ref="create" :model="patientInfo" :label-width="0">
                <FormItem label="" prop="remark">
                    <Input type="textarea" v-model="patientInfo.showRemarkText" placeholder="请输入备注内容" clearable></Input>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>

<script>
    import returnVisit from './modules/returnVisit';
    import Case from './modules/Case';
    import Treatment from './modules/Treatment';
    import consume from './modules/consume';
    import Images from './modules/detailed-Images';
    import Journal from './modules/Journal';
    import Foot from './modules/Foot'
    // import EditPatient from '../patient-list/modules/editPatient'
    import EditPatient from '../../../src/pages/patient/patient-list/modules/editPatient.vue'

    import { mapState, mapActions } from 'vuex';
    import { PatientDetailInfo, PatientUpdataDetail, UpdateAnti, UpdateRemark, setAagsEdit, PatientInfoFoot } from '@/api/patient'
    import { postUpdateFollow, addTagsList } from '@api/setting'
    export default {
        name: 'index',
        computed: {
            ...mapState('admin/page', ['pagePatient'])
        },
        components: { returnVisit, Case, Treatment, consume, Images, Journal, Foot, EditPatient },
        data () {
            return {
                diagnosisStatus: '',
                modal12: false,
                Focus: '关注',
                isHidden: false,
                isShow: false,
                showCreate: false,
                moneyStatus: false,
                title: '备注',
                creating: true,
                mobile_history: [],
                isIcon: false,
                patientInfo: {
                    name: '',
                    age: '',
                    gender_str: '',
                    belong_member_name: '',
                    patient_card_id: '',
                    mobile: '',
                    city_name: '',
                    clinic_name: '',
                    body_parts_name_arr: [],
                    tags_name_arr: [],
                    remark: '',
                    showRemarkText: '',
                    callback_count: '',
                    next_callback_time_str: '',
                    kf_next_callback_time_str: '',
                    yz_next_callback_time_str: '',
                    next_revisiting_time_str: '',
                    created_at_str: '',
                    is_customer: 1
                },
                page: {
                    page: 0,
                    pageSize: 0,
                    total: 0
                },
                activeTab: '1',
                editType: 3,
                showUpdate: false,
                drawer: false,
                editPatientInfo: {},
                typeLists: [],
                taglist: [],
                tagIds: [],
                methodList: [],
                tags_list: [],
                checkedList: [],
                list: [],
                status: false,
                value: '展开'
            }
        },
        mounted () {
            this.activeTab = '1'
            if (this.pagePatient && this.pagePatient.edit_type !== '') {
                this.editType = this.pagePatient.edit_type
            } else {
                this.editType = 3
            }
            if (this.pagePatient && this.pagePatient.patientId !== '') {
                this.patientId = this.pagePatient.patientId
                this.getInfoDetail()
                this.getEditDetail()
                this.$refs.userFoot.getData(this.patientId)
            } else {
                this.close({
                    tagName: '/patient/detail'
                })
                this.$router.go(-1)
            }
        },
        methods: {
            ...mapActions('admin/page', ['close']),
            // 展开 隐藏
            hidden () {
                this.isIcon = !this.isIcon
                this.isHidden = !this.isHidden
                if (this.isHidden === false) {
                    this.value = '展开'
                    this.isIcon = false
                } else {
                    this.value = '收起'
                }
            },
            // 关注
            focusOn (id, status) {
                const param = {
                    id,
                    follow_status: status === 0 ? 1 : 0
                }
                this.$Modal.confirm({
                    title: '切换关注状态',
                    content: '确定' + (status === 1 ? '取消关注' : '关注') + '?',
                    onOk: () => {
                        this.changeSubmits(param)
                    },
                    onCancel: () => {
                        // console.log('取消切换')
                    }
                });
            },
            // 点击切换状态
            handleClose (i, c) {
                const doc = this.tags_list[i].tags_list[c]
                this.$set(doc, 'checked', doc.checked === 1 ? 2 : 1)
            },
            // 提交标签
            async putTag () {
                let status = []
                for (let i = 0; i < this.tags_list.length; i++) {
                    for (let j = 0; j < this.tags_list[i].tags_list.length; j++) {
                        if (this.tags_list[i].tags_list[j].checked === 1) {
                            status.push(this.tags_list[i].tags_list[j].id)
                        }
                    }
                }
                const config = {
                    patient_id: this.patientInfo.id,
                    tags: status.join(',')
                }
                await setAagsEdit(config).then(res => { })
                this.getEditDetail()
                this.updateShow()
            },

            // 打开弹出框
            open () {
                this.modal12 = true
                addTagsList({ patient_id: this.patientInfo.id }).then(res => {
                    this.checkedList = []
                    this.tags_list = res.list
                    for (let i = 0; i < res.list.length; i++) {
                        this.checkedList.push(res.list[i] === 1)
                    }
                })
            },
            getInfoDetail () {
                PatientDetailInfo({ id: this.patientId, type: this.editType }).then(res => {
                    this.mobile_history = res.mobile_history
                    this.diagnosisStatus = res.is_show_anti
                    this.patientInfo = {}
                    this.patientInfo = res
                    this.patientInfo.showRemarkText = res.remark
                }).finally(() => {
                    this.status = true
                })
            },
            getEditDetail () {
                PatientUpdataDetail({ id: this.patientId }).then(res => {
                    this.editPatientInfo = res;
                    this.tagIds = res.tags_ids
                    this.typeLists = res.condition.outpatient_type_list
                    this.taglist = res.condition.tags_list
                    this.methodList = res.condition.callback_status_list
                })
            },
            updateShow () {
                this.getInfoDetail()
                this.getEditDetail()
                this.handleChangeTab(this.activeTab)
            },
            handleChangeTab (e) {
                this.activeTab = e
                switch (e) {
                case '1':
                    // 用户足迹
                    this.$refs.userFoot.getData(this.patientId)
                    break
                case '2':
                    // 回访信息
                    this.$refs.returnVisitInfo.getData(this.patientId, this.typeLists, this.taglist, this.methodList, this.tagIds, this.patientInfo)
                    break
                case '3':
                    // 病例信息
                    this.$refs.medicalRecord.getData(this.patientId)
                    break
                case '4':
                    // 治疗信息
                    this.$refs.treat.getData(this.patientInfo.patient_card_id)
                    break
                case '5':
                    // 消费信息
                    this.$refs.consume.getData(this.patientInfo.patient_card_id)
                    break
                case '6':
                    // 治疗图片
                    this.$refs.treatImg.getData(this.patientInfo.patient_card_id)
                    break
                case '7':
                    // 操作日志
                    this.$refs.actionLog.getData(this.patientId)
                    break
                }
            },
            back () {
                this.$router.go(-1);
            },
            handleOpenDrawer () {
                this.$refs.detailEdit.handleOpenDrawer(this.editPatientInfo.id || this.patientId, this.editType)
            },
            // 备注患者
            handleOpenRemark () {
                this.creating = false
                this.showCreate = true
            },
            // 取消备注
            handleCancel () {
                this.$nextTick(() => {
                    if (this.patientInfo.remark === '') {
                        this.patientInfo.showRemarkText = ''
                    } else {
                        this.patientInfo.showRemarkText = this.patientInfo.remark
                    }
                })
            },
            // 备注患者弹窗内容提交
            handleCreate () {
                const config = {
                    id: this.patientId,
                    remark: this.patientInfo.showRemarkText
                }
                this.creating = true
                UpdateRemark(config).then(res => {
                    this.$Message.success('编辑成功')
                    this.patientInfo.remark = this.patientInfo.showRemarkText
                }).finally(() => {
                    this.creating = false
                    this.showCreate = false
                })
            },
            handleDrawer () {
                this.drawer = false;
                this.$Message.success('编辑成功');
            },
            changeAnti (id, status) {
                const param = {
                    id,
                    is_anti_relapse: status === 0 ? 1 : 0
                }
                this.$Modal.confirm({
                    title: '切换标记状态',
                    content: '确定' + (status === 1 ? '取消抗复发' : '标为抗复发') + '?',
                    onOk: () => {
                        this.changeSubmit(param);
                    },
                    onCancel: () => {
                        // console.log('取消切换')
                    }
                });
            },
            changeSubmit (params) {
                UpdateAnti(params).then((res) => {
                    this.$Message.success('切换成功');
                    this.updateShow()
                }).catch(() => { })
            },
            changeSubmits (params) {
                postUpdateFollow(params).then((res) => {
                    this.$Message.success('切换成功');
                    this.updateShow()
                }).catch(() => { })
            },
            // 是否显示消费金额
            onMoney () {
                if (String(this.patientInfo.is_show_reality_moeny) === '0') return false
                this.moneyStatus = true
            }
        },
        filters: {
            // 标为抗复发/取消抗复发
            handleAnti (val) {
                let reVal = '';
                if (val === 0) {
                    reVal = '未标抗复发'
                } else if (val === 1) {
                    reVal = '已标抗复发'
                }
                return reVal;
            },
            //
            handleAntis (val) {
                let reVal = '';
                if (val === 0) {
                    reVal = '未关注'
                } else if (val === 1) {
                    reVal = '已关注'
                }
                return reVal;
            }
        }
    }
</script>
<style scoped lang="less">
    /deep/.model .ivu-modal-body {
        padding: 0px;
    }

    /deep/.ivu-description-term {
        vertical-align: top;
    }

    .i-layout-page-header {
        position: relative;
    }

    .time {
        font-size: 14px;
        font-weight: bold;
    }

    .content {
        padding: 10px 0;
    }

    .consultant {
        color: #9ea7b4;
    }

    .c-inr {
        margin: 0 10px;
    }

    h4 span {
        margin-left: 5px;
    }

    .side-bg {
        background: #f2f2f2;
        padding: 24px !important;
    }

    .return-form {
        padding: 24px;
    }

    .title {
        font-weight: bold;
        font-size: 16px;
        padding: 24px 0 0 24px;
    }

    .sky-screen {
        margin-top: 16px;
    }

    .sky-s1 {
        font-size: 14px;
        margin: 0 16px;
        color: #666;
    }

    .sky-s2 {
        font-size: 12px;
        margin-right: 10px;
        color: #888;
    }

    .sky-note {
        padding: 5px 0;
    }

    .moenyContent {
        display: inline-block;
        vertical-align: top;
        *display: inline;
        *zoom: 1;
        line-height: 20px;
        cursor: pointer;
        user-select: none;
    }

    .active {
        background: #efc531 !important;
        margin-left: 10px;
        padding: 5px 10px;
        border-radius: 4px;
        font-size: 14px;
    }

    .Classification {
        margin-left: 10px;
        padding: 5px 10px;
        background: #f7f7f7 !important;
        border-radius: 4px;
        font-size: 14px;
    }

    .tag {
        margin-top: -2px !important;
    }

    .hidden {
        position: absolute;
        right: 50px;
        bottom: 30px;
    }

    .historyPhone {
        display: flex;
        flex-direction: column;
        justify-content: center;

        .noHistory {
            text-align: center;
            padding: 20px 0;
            color: #808695;

        }

        .phoneBox {
            max-height: 200px;
            overflow: auto;
        }

        .hisToryText {
            padding: 6px 0;
            border-bottom: 1px solid #dcdee2;
        }

        .hahahhahaha {
            color: #808695;
            border-bottom: 1px solid #dcdee2;
            padding: 6px 0;
        }
    }
</style>
